import React from 'react'
import { Select , Button , Form , Input , Row , Col , Table , Space , message , DatePicker , Drawer, Tree  } from 'antd';
import { getAllGoodstypeApi , deleteGoodstypeApi  } from '../../apis/goods';
import { SettingOutlined , PlusOutlined } from '@ant-design/icons';
const { Option } = Select;
export default function Goodstype() {
  const [loading, setLoading] = React.useState(false);
  const [checkStrictly, setCheckStrictly] = React.useState(false);
  const [data,setData] = React.useState([]);
  const [sRowKeys,setSRowKeys] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const [drawerTitle, setDrawerTitle] = React.useState("");
  //新增
  const showDrawer1 = () => {
    setDrawerTitle("新增商品类型");
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  function getData(params) {
    getAllGoodstypeApi(params).then(res=>{
      console.log(res);
      setData(res.rows.children)
    })
  }
  React.useEffect(()=>{
    getData()
  },[]);

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
      width: '30%',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '30%',
      key: 'status',
    },
    {
      title: '操作',
      render: (item) => (
        <Space size="middle">
          <SettingOutlined onClick={()=>setUp(item)} style={{color:'#4ea1f5'}}/>
        </Space>
      ),
    },
  ];
  //树选择
  const treeData = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        {
          title: 'parent 1-0',
          key: '0-0-0',
          disabled: true,
          children: [
            {
              title: 'leaf',
              key: '0-0-0-0',
              disableCheckbox: true,
            },
            {
              title: 'leaf',
              key: '0-0-0-1',
            },
          ],
        },
        {
          title: 'parent 1-1',
          key: '0-0-1',
          children: [
            {
              title: (
                <span
                  style={{
                    color: '#1890ff',
                  }}
                >
                  sss
                </span>
              ),
              key: '0-0-1-0',
            },
          ],
        },
      ],
    },
  ];
  //修改
  const setUp = (value)=>{
    console.log(value);
    setDrawerTitle("修改商品类型");
    setOpen(true);
  }
  // const data = [
  //   {
  //     key: 1,
  //     name: 'John Brown sr.',
  //     age: 60,
  //     address: 'New York No. 1 Lake Park',
  //     children: [
  //       {
  //         key: 11,
  //         name: 'John Brown',
  //         age: 42,
  //         address: 'New York No. 2 Lake Park',
  //       },
  //       {
  //         key: 12,
  //         name: 'John Brown jr.',
  //         age: 30,
  //         address: 'New York No. 3 Lake Park',
  //         children: [
  //           {
  //             key: 121,
  //             name: 'Jimmy Brown',
  //             age: 16,
  //             address: 'New York No. 3 Lake Park',
  //           },
  //         ],
  //       },
  //       {
  //         key: 13,
  //         name: 'Jim Green sr.',
  //         age: 72,
  //         address: 'London No. 1 Lake Park',
  //         children: [
  //           {
  //             key: 131,
  //             name: 'Jim Green',
  //             age: 42,
  //             address: 'London No. 2 Lake Park',
  //             children: [
  //               {
  //                 key: 1311,
  //                 name: 'Jim Green jr.',
  //                 age: 25,
  //                 address: 'London No. 3 Lake Park',
  //               },
  //               {
  //                 key: 1312,
  //                 name: 'Jimmy Green sr.',
  //                 age: 18,
  //                 address: 'London No. 4 Lake Park',
  //               },
  //             ],
  //           },
  //         ],
  //       },
  //     ],
  //   },
  //   {
  //     key: 2,
  //     name: 'Joe Black',
  //     age: 32,
  //     address: 'Sidney No. 1 Lake Park',
  //   },
  // ];
  const searchFinish = (values) => {
    console.log('Success:', values);
    getData(values)
  };
  const searchFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
  };
  const onGenderChange = (value)=>{
    console.log(value);
  }
  //新增
  const showDrawer = ()=>{

  }
  //删除
  const delUser = (value)=>{
    console.log(value);
    console.log(sRowKeys);
    deleteGoodstypeApi(sRowKeys).then(res=>{
      console.log(res);
      message.success("删除成功")
      getData();
    }).catch(err=>{
      console.log(err);
      message.success("删除失败")
    })
   
  }

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setSRowKeys(selectedRowKeys.join(","));
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  const searchFinish1 = (values)=>{
    console.log(values);
  }
  const searchFinishFailed1 = ()=>{

  }
  //树
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };
  return (
    <div>
       <Form 
        labelCol={{span: 5}}
        wrapperCol={{span: 10}}
        initialValues={{remember: true}}
        onFinish={searchFinish}
        onFinishFailed={searchFinishFailed}
        layout='horizontal '
        style={{marginTop:45}}>
        <Row>
            <Col span={10}>
              <Form.Item label="商品类型名称:" name="name">
                  <Input/>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                name="status"
                label="状态"
              >
                <Select
                  onChange={onGenderChange}
                >
                  <Option value="1">启用</Option>
                  <Option value="2">停用</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item wrapperCol={{offset: 8,span: 16}}>
                  <Button className='b-s' style={{marginRight:10}} type="primary" htmlType="submit" loading={loading}>查询</Button>
                  <Button className='b-s'  htmlType="submit" loading={loading}>重置</Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <div>
          <Button className='b-s' onClick={showDrawer1}>新增</Button>
          <Button className='b-s' onClick={delUser} style={{margin:'0 10px 20px'}}>删除</Button>
        </div>
        <Table
          columns={columns}
          rowSelection={{
            ...rowSelection,
            checkStrictly,
          }}
          dataSource={data}
        />
        <div>
          {/* <Button type="primary" onClick={showDrawer1} icon={<PlusOutlined />}>
            New account
          </Button> */}
          <Drawer
            title={drawerTitle}
            width={720}
            onClose={onClose}
            open={open}
            bodyStyle={{
              paddingBottom: 80,
            }}
            // extra={
            //   <Space>
            //     <Button onClick={onClose}>Cancel</Button>
            //     <Button onClick={onClose} type="primary">
            //       Submit
            //     </Button>
            //   </Space>
            // }
          >
            <Form layout="vertical" 
             onFinish={searchFinish1}
             onFinishFailed={searchFinishFailed1}>
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item
                    name="name"
                    label="商品类型名称:"
                    rules={[
                      {
                        required: true,
                        message: '请输入商品类型名称',
                      },
                    ]}
                  >
                    <Input placeholder="请输入商品类型名称" />
                  </Form.Item>
                </Col>
              </Row>
              {
                drawerTitle == "修改商品类型" && <Row gutter={16}>
                <Col span={24}>
                <Form.Item
                  name="status"
                  label="商品类型状态:"
                  rules={[
                    {
                      required: true,
                      message: '请选择商品类型状态',
                    },
                  ]}
                >
                  <Select
                    onChange={onGenderChange}
                  >
                    <Option value="1">启用</Option>
                    <Option value="2">停用</Option>
                  </Select>
              </Form.Item>
                </Col>
              </Row>
              }
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item
                    name="name"
                    label="上级商品类型:"
                  >
                    <Tree
                        checkable
                        defaultExpandedKeys={['0-0-0', '0-0-1']}
                        defaultSelectedKeys={['0-0-0', '0-0-1']}
                        defaultCheckedKeys={['0-0-0', '0-0-1']}
                        onSelect={onSelect}
                        onCheck={onCheck}
                        treeData={data}
                      />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
            <Space>
              <Button onClick={onClose}>取消</Button>
              <Button onClick={onClose} type="primary">
                提交
              </Button>
            </Space>
          </Drawer>
        </div>
    </div>
  )
}
